import 'package:flutter/material.dart';

void main() => runApp(MyApp());

/*  
层叠布局和Web中的绝对定位、Android中的Frame布局是相似的，
子widget可以根据到父容器四个角的位置来确定本身的位置。
绝对定位允许子widget堆叠（按照代码中声明的顺序）。
Flutter中使用Stack和Positioned来实现绝对定位，Stack允许子widget堆叠，
而Positioned可以给子widget定位（根据Stack的四个角）。
*/

class MyApp extends StatelessWidget {

  @override
  Widget build(BuildContext context) {
    // TODO: implement build
    return MaterialApp(
      home: new Scaffold(
        appBar: new AppBar(
          title: new Text('层叠布局'),
          backgroundColor: Colors.orange[200],
        ),
        body: new ConstrainedBox(
          constraints: BoxConstraints.expand(),
          child: Stack(
            alignment: Alignment.topLeft, // 指定未定位或部分定位widget的对齐方式
            // 此参数用于决定没有定位的子widget如何去适应Stack的大小。
            // StackFit.loose表示使用子widget的大小，StackFit.expand表示扩伸到Stack的大小。
            // 由于第二个子widget没有定位，所以fit属性会对它起作用
            fit: StackFit.loose,
            children: <Widget>[
              new Container(
                color: Colors.red,
                child: Text("Hello world",style: TextStyle(color: Colors.white)),
              ),
              new Positioned(
                left: 20,
                top: 100,
                child: new Text('I an Jack'),
              ),
              new Positioned(
                top: 50,
                child: new Text('Yout friend'),
              )
            ],
          ),
        ),
      ),
    );
  }
}

